<!--预约订单-->
<template>
  <div>
    <el-tabs
        v-model="activeName"
        type="card"

        @tab-click="handleClick"
    >
      <el-tab-pane label="全部" name="first">
        <div class="orderItem" v-for="(item,index) in reservation" :key="index">
          <div class="orderItem_content">
            <div class="orderItem_content_item orderItem_content_tittle">{{ item.courtName }}</div>
            <div class="orderItem_content_item" style="margin-left: 3vw;">{{ item.time }}</div>
            <div class="orderItem_content_item orderItem_content_bottom">
              <el-link type="primary">预约成功</el-link>
              <el-button type="info" style="position:absolute;right: 5vw" @click="detailsClick(index)" round size="small">查看详情</el-button>
              <el-button type="info" style="position:absolute;right: 2vw" @click="openFun"  round size="small">取消</el-button>
            </div>
          </div>

        </div>
      </el-tab-pane>
      <el-tab-pane label="已预约" name="second">
        <div class="orderItem" v-for="(item,index) in reservation" :key="index">
          <div class="orderItem_content">
            <div class="orderItem_content_item orderItem_content_tittle">{{ item.courtName }}</div>
            <div class="orderItem_content_item" style="margin-left: 3vw;">{{ item.time  }}</div>
            <div class="orderItem_content_item orderItem_content_bottom">
              <el-link type="primary">预约成功</el-link>
              <el-button type="info" style="position:absolute;right: 5vw" @click="detailsClick(index)" round size="small">查看详情</el-button>
              <el-button type="info" style="position:absolute;right: 2vw" @click="openFun"  round size="small">取消</el-button>
            </div>
          </div>

        </div>
      </el-tab-pane>
      <el-tab-pane label="已取消" name="third">
        <div class="orderItem" v-for="(item,index) in reservation" :key="index">
          <div class="orderItem_content">
            <div class="orderItem_content_item orderItem_content_tittle">{{ item.courtName }}</div>
            <div class="orderItem_content_item" style="margin-left: 3vw;">{{ item.time  }}</div>
            <div class="orderItem_content_item orderItem_content_bottom">
              <el-link type="danger">预约已取消</el-link>
              <el-button type="info" style="position:absolute;right: 5vw" @click="detailsClick(index)" round size="small">查看详情</el-button>
              <el-button type="info" style="position:absolute;right: 2vw" @click="openFun"  round size="small">取消</el-button>
            </div>
          </div>

        </div>
      </el-tab-pane>

    </el-tabs>
    <el-dialog
        v-model="centerDialogVisible"
        title="详情"
        width="20%"
        draggable
        align-center
    >
      <el-form :model="detailsObject" label-width="5vw" label-position="right">
        <el-form-item label="预约人：">
          {{detailsObject.username}}
        </el-form-item>
        <el-form-item label="手机号：">
          {{detailsObject.phone}}
        </el-form-item>
        <el-form-item label="场馆：">
          {{detailsObject.courtName}}
        </el-form-item>
        <el-form-item label="场地：">
          {{detailsObject.site}}
        </el-form-item>
        <el-form-item label="日期：">
          {{detailsObject.date}}
        </el-form-item>
        <el-form-item label="时间：">
          {{detailsObject.time}}
        </el-form-item>
        <el-form-item label="人数：">
          {{detailsObject.population}}人
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button type="info" round size="small" @click="centerDialogVisible=false">返回</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {ElMessage, ElMessageBox } from 'element-plus'
import axios from "axios";

const open = () => {
  ElMessageBox.alert('取消成功!', {
    confirmButtonText: '确定',
    callback: ()=>{
      ElMessage({
        type: 'info',
        message: '确认',
      })
  }
  })
}
const openConfirm = () => {
  ElMessageBox.confirm(
      '确定要取消该预约？',
      '取消',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        open()
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消',
        })
      })
}

/*
*  {
                "reservationId": 2,
                "userId": 1,
                "courtId": 1,
                "reservationDate": "2023-07-12T16:00:00.000+00:00",
                "reservationDeposit": 5.0,
                "reservationNum": 4
            }
*
* */

export default {
  name: "AppointmentOrder",
  data(){
    return {
      activeName:'first',
      centerDialogVisible:false,
      detailsObject:{
        username:'username',
        phone:'4646848',
        arena:'球馆名',
        site: '场地名',
        date: '2023-01-01',
        time: '12:00-15:00',
        population:5
      },
      userInfo:{},
      reservation:[]
    }
  },
  methods:{
    detailsClick(index){
      this.centerDialogVisible=true
      this.detailsObject = this.reservation[index]
    },
    async handleClick(tab){
      if(tab.paneName === 'third'){
        this.getQuXiao()
      }else{
        this.getOrder()
      }
    },
    async getQuXiao(){
      axios.get('http://39.101.75.128:8080/system/reservations/selectListWithQuXiao').then((response)=>{
        this.packData(response.data.rows)
      })
    },
    openFun(){
      openConfirm()
    },
    init(){
      this.getOrder();
      this.dealData();
    },
    getOrder(){
      //拿到用户信息
      const account = localStorage.getItem('userAccount')
      axios.get('http://39.101.75.128:8080/user/selectUserByAccount', {
        params:{
          account:account
        }
      })
          .then(response => {
            const data = response.data.data
            for(let i=0;i<data.length;i++){
              if(data[i].account === account)this.userInfo=data[i]
            }
          })
          .catch(() => {
            // 请求发生错误，提示错误信息
            this.$message.error('userinfo信息获取失败!');
          });

      axios.get('http://39.101.75.128:8080/system/reservations', {
        params:{
          page:1,
          count:100
        }
      })
          .then(response1 => {
            /*
            * courtId  球场
              reservationDate   时间
              reservationDeposit  金额
              reservationId   预约
              reservationNum  预约号
              userId   用户
            * */

            //球馆集合
            // let courtList=[]
            // console.log(courtList)
            //
            this.packData(response1.data.data.list)


          })
          .catch((e) => {
            // 请求发生错误，提示错误信息
            console.log(e)
            this.$message.error('信息获取失败!');
          });

    },
    packData(list){
      axios.get('http://39.101.75.128:8080/system/court/',{
        params:{
          page:1,
          count:100
        }
      }).then(response =>{
        let courtList = []
        courtList=response.data.data.list
        const data = list
        this.reservation = []
        for(let i = 0;i<data.length;i++){
          let item = {}
          const dataItem = data[i]
          item.time = dataItem.reservationDate.slice(0,9)
          item.money = dataItem.reservationDeposit
          console.log(item.time.slice(0,9))
          for(let j = 0;j<courtList.length;j++){
            if(dataItem.courtId === courtList[j].courtId){
              item.courtName = courtList[j].courtName
            }
          }
          item.username=this.userInfo.account
          item.phone = this.userInfo.phoneNumber
          this.reservation.push(item)
        }
      })
    },
    dealData(){
      //封装数据
    },
    getDetail(index){
      const ids = this.reservation[index]
      console.log(ids)
    }
  },
  created() {
    this.init();
  }
}
</script>

<style scoped>
.orderItem{
  height: 12vh;
  border: 1px solid #99a9bf;
  margin: 2vh 0;
  position: relative;
}
.orderItem_content{
  position: absolute;
  top: 1vh;
  left: 1vw;
  width: 100%;
}
.orderItem_content_item{
  margin: 1vh 0;
}
.orderItem_content_bottom{
  position: relative;
}
</style>
